var chartRightTop = echarts.init(document.getElementById("right-top"));
var chartRightMid = echarts.init(document.getElementById("right-mid"));
var chartRightBtm = echarts.init(document.getElementById("right-btm"));

function chartRightFunc() {
  $.ajax({
    type: "post",
    url: baseUrl + "province/excessiveStatistics",
    success: function (data) {
      var provinceList = [];
      var so2List = [];
      var coList = [];
      var pmList = [];
      for (const v of data.data) {
        provinceList.push(v.pshort);
        so2List.push(v.so2Num);
        coList.push(v.coNum);
        pmList.push(v.pmNum);
      }

      var optionChartRightTop = {
        title: {
          show: true,
          text: "悬浮颗粒物（PM2.5）浓度超标累计",
          textStyle: {
            color: "#fff", //'red'，字体颜色
            fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
            fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
            fontFamily: "sans-serif", //'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
            // 'Microsoft YaHei'(微软雅黑) ，文字字体
            fontSize: 14, //字体大小
            lineHeight: 14, //字体行高
          },
          textAlign: "auto", //整体（包括 text 和 subtext）的水平对齐
          textVerticalAlign: "auto", //整体（包括 text 和 subtext）的垂直对齐
          //padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
          left: "25%", //'5' | '5%'，title 组件离容器左侧的距离
          right: "auto", //'title 组件离容器右侧的距离
          top: "5%", //title 组件离容器上侧的距离
          bottom: "auto", //title 组件离容器下侧的距离
        },
        tooltip: {
          trigger: "axis", // 触发类型，默认数据触发，可选为：'item'、'axis'
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "white",
          },
          data: provinceList,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "white",
          },
        },
        series: [
          {
            data: pmList,
            type: "bar",
            itemStyle: {
              color: "#409eff",
              shadowColor: "rgba(64,158,255,0.45)",
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
          },
        ],
      };

      chartRightTop.setOption(optionChartRightTop);

      var optionChartRightMid = {
        title: {
          show: true,
          text: "二氧化硫（SO2）浓度超标累计",
          textStyle: {
            color: "#fff", //'red'，字体颜色
            fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
            fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
            fontFamily: "sans-serif", //'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
            // 'Microsoft YaHei'(微软雅黑) ，文字字体
            fontSize: 14, //字体大小
            lineHeight: 14, //字体行高
          },
          textAlign: "auto", //整体（包括 text 和 subtext）的水平对齐
          textVerticalAlign: "auto", //整体（包括 text 和 subtext）的垂直对齐
          //padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
          left: "26%", //'5' | '5%'，title 组件离容器左侧的距离
          right: "auto", //'title 组件离容器右侧的距离
          top: "5%", //title 组件离容器上侧的距离
          bottom: "auto", //title 组件离容器下侧的距离
        },
        tooltip: {
          trigger: "axis", // 触发类型，默认数据触发，可选为：'item'、'axis'
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "white",
          },
          data: provinceList,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "white",
          },
        },
        series: [
          {
            data: so2List,
            type: "bar",
            itemStyle: {
              color: "#67c23a",
              shadowColor: "rgba(103,194,58,0.45)",
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
          },
        ],
      };

      chartRightMid.setOption(optionChartRightMid);

      var optionChartRightBtm = {
        title: {
          show: true,
          text: "一氧化碳（CO）浓度超标累计",
          textStyle: {
            color: "#fff", //'red'，字体颜色
            fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
            fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
            fontFamily: "sans-serif", //'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
            // 'Microsoft YaHei'(微软雅黑) ，文字字体
            fontSize: 14, //字体大小
            lineHeight: 14, //字体行高
          },
          textAlign: "auto", //整体（包括 text 和 subtext）的水平对齐
          textVerticalAlign: "auto", //整体（包括 text 和 subtext）的垂直对齐
          //padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
          left: "26%", //'5' | '5%'，title 组件离容器左侧的距离
          right: "auto", //'title 组件离容器右侧的距离
          top: "5%", //title 组件离容器上侧的距离
          bottom: "auto", //title 组件离容器下侧的距离
        },
        tooltip: {
          trigger: "axis", // 触发类型，默认数据触发，可选为：'item'、'axis'
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "white",
          },
          data: provinceList,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "white",
          },
        },
        series: [
          {
            data: coList,
            type: "bar",
            itemStyle: {
              color: "#f56c6c",
              shadowColor: "rgba(245,108,108,0.45)",
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
          },
        ],
      };

      chartRightBtm.setOption(optionChartRightBtm);
    },
  });
}

chartRightFunc();

setInterval(() => {
  chartRightFunc();
}, 5000);
